自動勉強会 vol.1 ペイントツール作製技術 後半
作ったものアピールコーナー（希望者）
前回からのアップデート: えんぴつチャットの多人数アンドゥ(詳細は0回の)
描画領域が重ならない限り多人数でもアンドゥができる
重なると先に書いた人はアンドゥできなくなるが、あとから書いた人がアンドゥするとブロックが解除される
水平塗りつぶし
floodFillRecursive 領域検出が隣接ピクセルへ単純に再帰で調べるので広すぎるとスタックオーバーフローする
塗れる領域がマスクだけされて、塗るのは自分やる(=手動)←面白いnagayama.icondaiiz.icon
塗れるマスクの算出が普通の塗りつぶしのコードと等価
あえて塗り残しを表現したいときに有効な技
画材をつくっているようなものなのでいろんな表現があると楽しい by hashrock.icon 誰かアンチエイリアスかかってる線に対する塗りつぶし時のフリンジを解決してほしいhashrock.icon
収縮と膨張、オープニングとクロージング
前回の線が開いてる領域への塗りつぶしでも出ててきたやつですねD.icon
筆圧の表現
これ分かりやすいmiyamonz.icon
Some CSS がなんなのか
メタボール的なので滑らかにしてる？？
ああ、CSSでメタボールするテクニックありましたねD.icon それくらいしかCSSで滑らかにするものないhashrock.icon
手書きの知見に溢れるツイートが多いアカウント
パラメータ
速度
8bitペイントではブラシスクリプトという機能を使って自分で実装することができる
luaでかける←まじかよnagayama.iconbaku89.icon
ブラウザで動かすようにしてるライブラリ何です？D.icon
C (WASM)
wasm の中なら安全 hata6502.iconseanchas_t.icon
figmaはJSでプラグインかける。JSを安全に実行できる方法があるのではないか。気になる。seanchas_t.icon
iframeの中で実行した結果だけ返してもらうとかはありそう
figmaはなんかjs sandboxつかってるらしいjokester.icon
なるほどnagayama.icon
筆圧
この↓の筆圧の調整の曲線、キャリブレーションの意味合いもあったりするんだろうか？
Apple Pencil のストロークはじめ10ms程度がかなり強めにぶれる→デベロッパー側が捨ててやる必要がある
他のデバイスではそういうことはない。描きごこちを最大化するために仕方がないのかもしれない
生のデータ、ろくなことなさそうD.icon
変化の曲線
既存のアプリでいじれるものも多い
クリップスタジオの例:
https://www.clip-studio.com/site/gd/csp/manual/userguide/csp_userguide/500_menu/500_menu_0523.jpg
ガンマカーブ(ディスプレイ調整とかに使われてる奴)を使ってます(8bitpaint)
0-1に正規化した筆圧値を2乗したり1/2乗したりしていい感じの曲線
硬さ→大きいとグラフは下に膨らみ目、筆圧が小さいうちはより細めに、強くするといきなり太く
1つの指標でシンプルに表現できるようにした。クリスタなどはスプライン(?)で細かく設定できる
カーブというインターフェイスいいですよね…… X to Y の写像を人間に分かりやすく示してくれるD.icon
主要ツール
図形ツール
パスファインダ（イラレみたいな）を簡単に行えるライブラリはありませんか…？
ただ、ポリゴンしか対応していないですが・・・
Canvasのブレンドモード（↓の消しゴムの話）使えばベクターに変換する必要ないのでは？
globalCompositeOperation
8bitpaintの図形ツール
直線ツール動かしてる最中のプレビューあるのいいですね
これ描画はどうやってやってます？
Canvasで普通に描いてます
やっぱりこれはjs側です？（前回、描画のコアライブラリはwasmだという話だったので） → はい
バケツ (flood fill)
8bitpaint 高解像度の2値が正義です！アンチエイリアスは敵だ！
ひょええD.icon
いい話だ！daiiz.icon
そういえば、サブピクセル独特のにじみが苦手。hata6502.icon -webkit-font-smoothing: subpixel-antialiased と関係ある…? seanchas_t.icon
Macのフォントアンチエイリアスの調整に使いがち
これでサブピクセルを切るとシュッとするのでよくやりますnagayama.icon
消しゴム
canvasのブレンドモード
便利な機能がありそう。（未経験）hata6502.icon
destination-out使いがちですseanchas_t.icon
ベジェの切断
再帰的にbezierを分割してやる?
ベジェの外形を削る
消しゴム ≒ 白のペン で考えてます。hata6502.icon
ベクターデータ量が増える問題
レイヤーを考えると、下のレイヤーを塗りつぶしてしまう。
さくっとCanvasでマスクして転送しましたね
Blenderのグリースペンシルで消しゴムみたいな機能があった気がしますが、あれどうなってんだろ
選択範囲
選択ペン（選択領域のブラシでの描画）
選択範囲にアルファあるってことですか？ → です。選択範囲のふちをぼかすコマンドとかありますね
2値ならともかくぼかしてあるまま広げるの面倒そう
なげなわ
変形
回転・リサイズ
繰り返し実行しても劣化させない工夫はあるかhashrock.icon
自由変形
そもそもどういうアルゴリズムがあるの？
手前味噌&今読むと読みづらいところもありますがmiyamonz.icon
射影変換、要するに４点を一つ次元の高い空間でいい感じに線形変換して元の次元に落としたもの
と思ってるけど正しいんだっけmiyamonz.icon
1点→1点: 平行移動, 2点: Translate, Rotate, Scale, 3点: アフィン変換, 4点→射影変換
パース変形
メッシュ変形
ワープ変形
8bit paintの変形
https://gyazo.com/725d2c2d78011f74663c204032b64264
CSS Transform 3D...!
なるほどーnagayama.icon
描画中のプレビューはCSSに頼って労力減らしていくのよい daiiz.icon
めっちゃいいnagayama.icondaiiz.icon
https://gyazo.com/060682101c391a06a234509d7d68fed6
https://gyazo.com/94980303200416f96f0ce503d163aff8
Cyriak, AC部がよく使ってますよね...baku89.icon 使えるソフト
AfterEffects, Photoshopの「パペットワープツール」baku89.icon
picmo
補間アルゴリズム (nearest neighbor, biliear, bicubic...)
canvasはbilinearのみ…?
https://gyazo.com/941c4e50422a5b8a2e02f9976a7909cd
仕様が強制してないということが分かった
実装依存ですねー……
UI周り
パレット
デフォルトの色選びをどうしたか（例えば30色ぐらいデフォルトパレットを選ぶときに使いやすい色を選びたい）hashrock.icon
デジタル８色使ってますが、中間色を表現しにくい。hata6502.icon
https://gyazo.com/9235ff0e74ff063439212829a6bb3e27
macaronのカラーピッカーのデモ
画像背景の設定もできる←めちゃ便利そうnagayama.iconbaku89.icon
figmaはすぐにこれをパクれnagayama.icon
VSCode プラグイン...!baku89.icon*4
WebViewを別のコンテキストで色々
Electronとかと同じ感じですかねー？D.icon ElectronとかWebWorkerとか、そっち側に知見があるんじゃないかなあ
undo管理とエディタ自体を別processで管理しないといけないのがつらい
同じファイルに複数のwebviewが作られる可能性もあるのが大変 (offにはできる)
アンドゥ
これを同時編集対応しようとすると結構エキサイティングになる mactkg.icon Figmaのこの記事がわかりやすかったです
実装したよ！(えんぴつチャット)
レイヤ
合成モード
合成モードの式の一覧が載っててありがたい
あれキャッシュしてるんですかねえ
パレット使って避けた（256 png 8ビットあるから色が塗られているかのフラグを8色分持てる）
あまり書かれてないレイヤーのメモリを節約する方法 (タイリングとか?) seanchas_t.icon
UIデザイン
カーソルの見た目
UIが参考になるペイントツール
SAI
Procreate
参考というべきかわかりませんが, base16でUIのスキンを変更出来る仕様にしてます.. いいですね!seanchas_t.icon
保存
8bitpaint の「PSDで保存」、気になります...
そのまんまの機能ですよ
JSでどうエンコードするのかという話でした🙏
c(wasm)で独自実装です
↑!!!!baku89.iconD.iconnagayama.iconseanchas_t.icon
まじかーnagayama.icon
バージョン3くらいの古い仕様書を読んで自分で実装した（Windowsのツールとして）
動画はローカルで作ってる
動画はjsのライブラリにCanvasを渡してる
MediaRecorder API ってどうなんだろう…? seanchas_t.icon
コンテナはWebMだけど中身はmp4とかでよく使われるやつ入れることができる？